<template>
    <Divider class="cvu-divider"
        :type="type"
        :orientation="orientation"
        :dashed="dashed"
        :plain="plain"
        :size="size"
        :style="{ margin: margin }"
    >
        <slot v-if="$slots.default" />
    </Divider>
</template>

<script>
export default {
    name: 'cvu-divider',
    props: {
        // 水平还是垂直类型，可选值为 horizontal 或 vertical
        type: {
            type: String,
            default: 'horizontal'
        },
        // 分割线标题的位置，可选值为 left、right 或 center
        orientation: {
            type: String,
            default: 'center'
        },
        // 是否虚线
        dashed: {
            type: Boolean,
            default: false
        },
        // 文字是否显示为普通正文样式
        plain: {
            type: Boolean,
            default: false
        },
        // 尺寸，可选值为 small 或 default
        size: {
            type: String,
            default: 'default'
        },
        // 间距
        margin: {
            type: String,
            default: '0px'
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '../../../style/_index.scss';
    .cvu-divider{
        margin: 0;
        background: #DCDCDC;
        -webkit-transform: scaleY(.8);
        transform: scaleY(.8);
        &.ivu-divider-horizontal.ivu-divider-with-text-center, 
        &.ivu-divider-horizontal.ivu-divider-with-text-left, 
        &.ivu-divider-horizontal.ivu-divider-with-text-right{
            background: transparent;
        }
        &::before,&::after{
            border-top-color: #DCDCDC;
        }
    }
</style>